<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref, watch, watchEffect } from 'vue';
import { data, refreshData } from './data'
import { IconInput } from '../../components/useIcon';
import FontSelect from './Shower/FontSelect.vue';
import TypeSelect from './Shower/TypeSelect.vue';
import FontShower from './Shower/FontShower.vue';
import Icon from '../../components/Icon.vue';
import { debounce } from 'lodash-es'

const selected = reactive({
    fontFamilyTag: 'Origin' as keyof IconInput,
    type: ''
})

watch(selected, () => {
    rebuildResult()
})


/** search 的文本字段 */
const filterText = ref('')
const filterReg = computed(() => {
    const text = filterText.value.replace(/\s/g, '')
    return text ? new RegExp(text, 'g') : null
})
/** 现在选中的字符归类 */
const selectType = computed(() => {
    return data.find(i => i.type === selected.type)
})
const filterFuncs: ((string: string) => boolean)[] = [
    (iconText) => {
        if (filterReg.value === null) {
            return true
        } else {
            return filterReg.value!.test(iconText)
        }
    }
]

/** 唯一可以更新结果的方式 */
const rebuildResult = debounce(() => {
    afterFilterFonts.value = selectType.value?.iconList.filter(iconText => {
        return filterFuncs.every(func => func(iconText))
    }) || []
}, 500)

/** 最终呈现的数组 */
const afterFilterFonts = ref([] as string[])

onMounted(() => {
    refreshData()
    nextTick(() => {

        rebuildResult()
    })
    selected.type = "action";
})
const textColor = ref('#000000')
const iconColor = ref('#000000')
// 这里如果不用 debounce 的话运算量会非常大
watch(textColor, debounce(() => {
    iconColor.value = textColor.value
}, 50))
</script>

<template>
    <div class="flex flex-col h-full">
        <div class="flex items-center justify-center bg-gray-200">
            <!-- 字体选择栏 -->
            <FontSelect
                :tag="selected.fontFamilyTag"
                @select="(tag) => selected.fontFamilyTag = tag"
            ></FontSelect>
        </div>
        <div class="flex flex-grow h-full w-full overflow-y-auto overflow-x-hidden">
            <!--  侧边栏 -->
            <TypeSelect :type="selected.type" @select="(type) => selected.type = type"></TypeSelect>

            <!-- 主体展示 -->
            <div class="flex-grow flex flex-col w-full px-4 pt-4 h-full">
                <div class="flex-none w-full flex justify-end">
                    <div class="bg-gray-100 flex items-center px-4 py-2">
                        <Icon>remove_red_eye</Icon>
                        <span class="px-2">颜色调整</span>
                        <input
                            type="color"
                            class="shadow outline-none py-1 px-2 rounded-lg"
                            v-model="textColor"
                        />
                    </div>
                    <div class="bg-gray-100 flex items-center px-4 py-2">
                        <Icon>search</Icon>
                        <span class="px-2">搜索英文名称</span>
                        <input
                            type="text"
                            class="shadow outline-none py-1 px-2 rounded-lg"
                            v-model="filterText"
                            @input="rebuildResult"
                        />
                    </div>
                </div>
                <FontShower
                    class="w-full px-6 pt-4"
                    :style="{
                        color: iconColor
                    }"
                    :tag="selected.fontFamilyTag"
                    :icon-list="afterFilterFonts"
                ></FontShower>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>
